<template>
    <div class="table-wrap">
        <slot name="btn"></slot>
        <el-table v-bind="$attrs" style="width: 100%" stripe :height="height || tableHeight">
            <template v-for="(item, itemIndex) in $attrs.columns">
                <el-table-column
                  v-if="item.type && item.type === 'operations'"
                  :key="item.key"
                  prop="operations"
                  label="操作"
                  v-bind="{...$attrs,...item}"
                >
                <!-- 操作列 -->
                    <template #default="{row,$index,column}" v-if="item.actions">
                        <el-button
                          v-for="(btn,inx) in item.actions({row,$index,column})"
                          :key="`btn_${inx}`"
                          @click="btn.click()"
                          link
                          :type="btn.type || 'primary'"
                        >
                        {{ btn.label }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                  v-else
                  :key="`${itemIndex}_${item.key}`"
                  :prop="item.key"
                  :label="item.label"
                  v-bind="{...$attrs,...item}"
                >
                <!-- v-slot="{row, index, column}" -->
                    <template v-if="item.slot" #default="{row,$index,column}">
                        <slot :name="item.slot" v-bind="{row, $index, column}"></slot>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-pagination
            class="page"
            v-if="isShowPage"
            v-bind="page"
            @current-change="onCurrentChange"
            @size-change="onSizeChange"
            :page-sizes="[50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
         />
    </div> 
</template>

<script setup>
import useUserStore from '@/store/modules/user'
import { computed, useAttrs } from 'vue'

let props = defineProps({
  height: Number,
  page: {
    type: Object,
    default: () => {}
  },
  isShowPage: {
    type: Boolean,
    default: false
  }
})

const $slots = defineSlots()

let userStore = useUserStore()

const tableHeight = computed(() => {
  return $slots.btn ? (props.isShowPage ? userStore.viewHeight - 310 : userStore.viewHeight - 263 ) 
    : (props.isShowPage ? userStore.viewHeight - 266 : userStore.viewHeight - 218)
})

const $attrs = useAttrs()
// console.log('$attrs',$attrs)

// const tableColumns = computed(() => {
//     return $attrs.columns.map(item => {
//         if(item.type && item.type === 'operations') {
//             return {
//                 ...item,

//             }
//         }
//         return item;
//     })
// })
const $emit = defineEmits(['currentChange','sizeChange'])
const onCurrentChange = pageNum => {
  $emit('currentChange', pageNum)
}
const onSizeChange = pageSize => {
  $emit('sizeChange', pageSize)
}

</script>

<style lang="scss" scoped>
.table-wrap {
    margin-top: 10px;
    padding: 16px;
    background-color: #fff;
    border-radius: 5px;
    .page {
        margin-top: 16px;
        justify-content: right;
    }
}
</style>